<template>
    <div style="height:100%">
        <div>
            <nav-bar :showBack="true" title="洗澡"/>
        </div>
        <div>
            <yd-flexbox direction="vertical" style="background-color:#FFF;height:2.5rem">
                <yd-flexbox-item>
                    <img src="../../img/user.png" alt="" style="width:.5rem;height:.5rem;" class="top_img">
                    <span class="top_font">用户账号：</span>
                </yd-flexbox-item>
                <yd-flexbox-item>
                    <img src="../../img/name.png" alt="" style="width:.5rem;height:.5rem" class="top_img">
                    <span class="top_font">用户姓名：</span>
                </yd-flexbox-item>
                <yd-flexbox-item>
                    <img src="../../img/coin.png" alt="" style="width:.5rem;height:.5rem" class="top_img">
                    <span class="top_font">水币：</span>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
        <div style="margin-top:.1rem">
            <yd-grids-group :rows="5">
                <yd-grids-item>
                    <img src="../../img/recharge.png" slot="icon">
                    <span slot="text" class="middle_font">余额充值</span>
                </yd-grids-item>
                <yd-grids-item>
                    <img src="../../img/equipment.png" slot="icon">
                    <span slot="text" class="middle_font">连接设备</span>
                </yd-grids-item>
                <yd-grids-item>
                    <img src="../../img/help.png" slot="icon">
                    <span slot="text" class="middle_font">帮助中心</span>
                </yd-grids-item>
                <yd-grids-item>
                    <img src="../../img/search.png" slot="icon">
                    <span slot="text" class="middle_font">充值查询</span>
                </yd-grids-item>
                <yd-grids-item>
                    <img src="../../img/record.png" slot="icon">
                    <span slot="text" class="middle_font">用水记录</span>
                </yd-grids-item>
            </yd-grids-group>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'Bathe',
    components: {
        NavBar
    }
}
</script>
<style scoped>
.top_font {font-size: .3rem; margin-left: .1rem;}
.top_img {position: relative; top:.1rem; margin-left: .7rem;}
.middle_font {font-size: .2rem;}
</style>
